<template>
  <div class="nav-menu">
    <div class="nav-menu-header">
      <img class="img" src="~@/assets/img/vue.svg" alt="" />
      <span v-if="!isNavFold" class="title">管理系统</span>
    </div>

    <el-menu
      default-active="39"
      unique-opened
      class="el-menu-vertical-demo"
      background-color="rgb(176, 181, 176)"
      :collapse="isNavFold"
      :collapse-transition="false"
    >
      <el-sub-menu
        v-for="item in userMenus"
        :key="item.id"
        :index="item.id + ''"
      >
        <template #title>
          <component class="icons item-icon" :is="item.icon"></component>
          <span>{{ item.name }}</span>
        </template>
        <el-menu-item
          v-for="subitem in item.children"
          :key="subitem.id"
          :index="subitem.id + ''"
          >{{ subitem.name }}</el-menu-item
        >
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script lang="ts">
import { useStore } from '@/store'
import { computed, defineComponent } from 'vue'
// import { Setting, Goods, Monitor } from '@element-plus/icons-vue'

export default defineComponent({
  // components: { Setting, Goods, Monitor },
  props: {
    isNavFold: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    const store = useStore()
    // const isNavFold = ref<any>(false)
    const userMenus = computed(() => store.state.login.userMenus)
    return { userMenus }
  }
})
</script>

<style scoped lang="less">
.nav-menu {
  height: 100vh;
  background-color: rgb(176, 181, 176);
  // .el-menu-vertical-demo {
  //   height: 100vh;
  // }
  .nav-menu-header {
    padding-top: 20px;
    padding-left: 20px;
    white-space: nowrap; /*强制span不换行*/
    // display: inline-block; /*将span当做块级元素对待*/
    .img {
      width: 30px;
      height: 30px;
      vertical-align: middle;
    }
    .title {
      padding-left: 20px;
      font-size: 20px;
      font-weight: 500;
    }
  }
  .el-menu {
    border-right: none;
  }
  .item-icon {
    width: 15px;
  }
}
</style>
